<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: pink;
        }
        .zy{
            margin: 0 auto;
            width: 200px;
            height: 200px;
            position: relative;
            transform: rotate(45deg);
            transform-style: preserve-3d;
            animation: 10s spin linear infinite;
            transition: transform 1s linear;
        }
        .zy>div{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 5px solid red;
            background-color: plum;
        }
        @keyframes spin{
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        .zy>div:nth-child(1){
        transform: translateZ(-100px);
        transition: transform 1s linear;
        }
        .zy>div:nth-child(2){
transform: rotateY(-90deg) translateZ(100px);
transition: transform 1s linear;
}        .zy>div:nth-child(3){
transform: rotateY(-90deg) translateZ(-100px);
transition: transform 1s linear;
}        .zy>div:nth-child(4){
    transform: rotateX(90deg) translateZ(100px);
transition: transform 1s linear;

}        .zy>div:nth-child(5){
    transform: rotateX(90deg) translateZ(-100px);
transition: transform 1s linear;

}        .zy>div:nth-child(6){
    transform:translateZ(100px);

}        
    </style>
</head>
<body>
    <div class="con">
        <div class="zy">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>